<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精彩瞬间</title>
    <link rel="stylesheet" href="/css/mobile/index.css">
    <!-- 重置默认样式 -->
    <link rel="stylesheet" href="/css/resetcss.css">

    <style>
        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"],
        textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            box-sizing: border-box;
        }

        input[type="file"] {
            margin-bottom: 15px;
        }

        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <div class="nav-item active">
                <a href="#" class="nav-home">
                    <i class="fas fa-home"></i>
                    <span>主页</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-life">
                    <i class="fas fa-camera"></i>
                    <span>生活瞬间</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-tour">
                    <i class="fas fa-plane"></i>
                    <span>旅行记录</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-atlas">
                    <i class="fas fa-images"></i>
                    <span>精彩图集</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-center">
                    <i class="fas fa-user"></i>
                    <span>个人中心</span>
                </a>
            </div>
        </div>
    </nav>

    <!-- 未来搜索框 -->
    <div class="search">
        
    </div>
    
    <!-- 内容区域 -->
    <div class="content">
        <label for="imageUpload">选择图片（可拍照）:</label>
        <input type="file" id="imageUpload" accept="image/*" capture="camera">
        <label for="title">标题:</label>
        <input type="text" id="title" placeholder="请输入标题">
        <label for="description">描述:</label>
        <textarea id="description" placeholder="请输入描述内容" rows="5"></textarea>
        <button class="submit-create">提交</button>
    </div>
    
</body>
    
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="/configfile/config.js"></script>
<script type="module">
    
	//window.__ENV__   这样来读取env环境变量里面公开出来的变量

	//获取导航的a标签，并设置href
	const navhome = document.querySelector('.nav-home'); // 返回第一个匹配的节点
	const navlife = document.querySelector('.nav-life'); // 返回第一个匹配的节点
	const navatlas = document.querySelector('.nav-atlas'); // 返回第一个匹配的节点
	const navcenter = document.querySelector('.nav-center');//获取个人中心DOM
    


	let server_ip = window.__ENV__.SERVER_IP;//服务器ip
	let home_ip = window.__ENV__.HOME_SERVER_IP;//首页ip
	navhome.href = home_ip;
	let life_ip = window.__ENV__.LIFEMOMENT_SERVER_IP;//生活瞬间
	navlife.href = life_ip;
	let atlas_ip = window.__ENV__.ATLAS_SERVER_IP;//图片集
	navatlas.href = atlas_ip;
	let user_ip = window.__ENV__.USER_SERVER_IP;//用户
    navcenter.href = user_ip;

	//获取令牌
	let token = localStorage.getItem("token");

    // 简单的导航栏交互效果
    document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelector('.nav-item.active').classList.remove('active');
            this.classList.add('active');
        });
    });
    
    function submitForm() {
      var image = document.getElementById('imageUpload').files[0];
      var title = document.getElementById('title').value;
      var description = document.getElementById('description').value;

      //构建form表单，浏览器的方法
      const formData = new FormData();
        formData.append("image", image); //封面
        formData.append("Lifename", title); //计划名称
        formData.append("Lifemessage", description); //计划简介
        
        //读取上传的图片信息和用户信息
        axios
            .post(
                life_ip+"/createlife",
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        "Authorization": `Bearer ${token}`
                    },
                }
            )
            .then((res) => {
                //判断后端的报错信息。如果存在则保存失败
                // console.log(res.data);
                if(res.data.message.success){
                    alert("创建成功");
                    window.location.href = life_ip;
                }
            })
            .catch(err => {
                console.log(err);
            });
    }

    let submitcreate = document.querySelector(".submit-create");
    submitcreate.addEventListener("click", submitForm);

</script>
</html>